/**
 * @author: 榄忎簯椋�(weiyunfei@rd.keytop.com.cn).
 * @desc: .
 * @date: 2017/9/9.
 */
//鏍规嵁灞忓箷瀹藉害鏇存敼font-size
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            var recalcSize = 10 * (clientWidth / 320);
            if(recalcSize > 20) recalcSize = 20;
            recalcSize += 'px';
            docEl.style.fontSize = recalcSize;
            console.log(docEl.style.fontSize + "-" + recalcSize)
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

(function ($) {
    $.fn.lpnSelect = function (config) {
        $("body").click(function () {
            closeKeyBoard();
        });

        //鍗犱綅鎸夐敭鍜屽垹闄ょ殑鐗规畩澶勭悊锛宺eturn true琛ㄧず鍋滄
        var stopKeyEvent = function (me, type) {
            if (me.hasClass("disable") || me.hasClass("empty") || me.hasClass("empty_2")) {
                return true;
            }
            if (me.hasClass("del")) {
                var carPlateNum = $('#carplatnum').text();
                if (type == "touchend" && carPlateNum.length > 0) {
                    carPlateNum = carPlateNum.substr(0, carPlateNum.length - 1);
                    $('#carplatnum').text(carPlateNum);
                }
                showKeyBoard();
                toggleEnergyIcon();
                toggleDisplayKey();
                // console.log(carPlateNum);
                return true;
            }
            return false;
        };

        //鏍规嵁褰撳墠杞︾墝闀垮害鏄剧ず瀵瑰簲閿洏
        var showKeyBoard = function () {
            $(".keyboard_box").show();
            var carPlateNum = $('#carplatnum').text();
            if (carPlateNum.length == 0) {
                $(".keyboard.suffix").hide();
                $(".keyboard.chs").show();
            } else {
                $(".keyboard.chs").hide();
                $(".keyboard.suffix").show();
            }
        };

        //闅愯棌娴姩鍥剧墖
        var hideClickImgObj = function () {
            var clickImgObj = $(".click");
            clickImgObj.css({
                "zIndex": "-200",
                "visibility": "hidden"
            });
        };

        //鏄剧ず銆侀殣钘忔暟瀛楁寜閿€丱瀛楁瘝鍜屾腐婢冲鎸夐敭
        var toggleDisplayKey = function () {
            var carPlateNum = $('#carplatnum').text();
            if (carPlateNum.length <= 1 && carPlateNum != "浣�") {
                $(".key.n_key").addClass("disable");
            } else {
                $(".key.n_key").removeClass("disable");
            }
            if (carPlateNum.length == 1) {
                $(".key.o_key").removeClass("disable");
            } else {
                $(".key.o_key").addClass("disable");
            }
            if (carPlateNum.length >= 6) {
                $(".key.last").removeClass("disable");
            } else {
                $(".key.last").addClass("disable");
            }
        };

        //鏄剧ず銆侀殣钘忔柊鑳芥簮鍥炬爣
        var toggleEnergyIcon = function () {
            var carPlateNum = $('#carplatnum').text();
            if (carPlateNum.length == 8) {
                $('#icon_energy').show();
            } else {
                $('#icon_energy').hide();
            }
        };

        //鍏抽棴閿洏
        var closeKeyBoard = function () {
            hideClickImgObj();
            $(".keyboard_box").hide();
            $("#carplatnum").removeClass('cursor');
            var i = $("#carplatnum").html().length;
            if (i < 1) {
                $("#placeholder").show();
            }
            recoverCarPlateNumInputBox();
        };

        //婵€娲昏緭鍏ユ锛屾牴鎹甤arplatnum闀垮害 鏄剧ず涓嶅悓閿洏
        $(".searchbar").click(function () {
            $("#carplatnum").addClass('cursor');
            $("#placeholder").hide();
            showKeyBoard();
            toggleEnergyIcon();
            toggleDisplayKey();
            adjustCarPlateNumInputBox();
            event.stopPropagation();//闃绘浜嬩欢鍐掓场
        });

        //璋冩暣杞︾墝杈撳叆妗嗕綅缃�
        var adjustCarPlateNumInputBox = function () {
            var searchbarTop = $(".searchbar").attr("offsetTop");//杞︾墝杈撳叆妗嗚窛绂婚〉闈㈤《閮ㄧ殑璺濈
            var searchbarHeight = $(".searchbar").height();//杞︾墝杈撳叆妗嗛珮搴�
            var keyboardHeight = $(".keyboard_box").height();//閿洏楂樺害
            var winHeight = document.body.clientHeight;//椤甸潰楂樺害
            var distant = (searchbarTop + searchbarHeight) - (winHeight - keyboardHeight);
            if (distant > 0 && $(".adjust_box").length > 0) {//閿洏鎸′綇杞︾墝杈撳叆妗嗭紝闇€瑕佽皟鏁�
                $(".adjust_box").css({
                    'webkitTransform': 'translateY(-' + (distant + 10) + 'px)',
                    'transform': 'translateY(-' + (distant + 10) + 'px)'
                });
            }
            // alert(winHeight + ";" + searchbarTop + ";" + searchbarHeight + ";" + keyboardHeight);
        };
        //鎭㈠杈撳叆妗嗕綅缃�
        var recoverCarPlateNumInputBox = function () {
            if ($(".adjust_box").length > 0) {
                $(".adjust_box").css({
                    'webkitTransform': 'translateY(0px)',
                    'transform': 'translateY(0px)'
                });
            }
        };

        return {
            //璁剧疆榛樿杞︾墝
            initSelect: function (carPlateNumber, isreadonly) {
                $('#carplatnum').text(carPlateNumber);
                if (isreadonly) {
                    $(".searchbar").off('click');
                }
                if (carPlateNumber != undefined && carPlateNumber.length > 0) {
                    $("#placeholder").hide();
                }
                if (carPlateNumber != undefined && carPlateNumber.length == 8) {
                    $('#icon_energy').show();
                }

            },
            //鑾峰彇杞︾墝
            getCarPlateNumberValue: function () {
                return $('#carplatnum').text();
            },
            //鍒濆鍖栭敭鐩�
            initKeyboard: function (selector) {
                var html = '';
                html += '<!--閿洏寮€濮�-->';
                html += '<div class="keyboard_box" align="center">';
                html += '   <div class="bar">';
                html += '       <div class="k_close">鍏抽棴</div>';
                html += '   </div>';
                html += '   <!--杞︾墝棣栨眽瀛楅敭鐩樺紑濮�-->';
                html += '   <div class="keyboard chs">';
                html += '       <div class="click">';
                html += '           <div class="cover"></div>';
                html += '           <div class="float_num">8</div>';
                html += '           <img src="' + cpBase + 'resources/css/images/keyboard/hover.png"/>';
                html += '       </div>';
                html += '       <div class="key_box flex_center">';
                html += '           <div class="key flex_full" onmousedown="touchStartHandler"><span><i>浜�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>娌�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>绮�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>娲�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>鍐€</i></span></div>';

                html += '           <div class="key flex_full"><span><i>璞�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>浜�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>杈�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>榛�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>婀�</i></span></div>';
                html += '       </div>';
                html += '       <div class="key_box flex_center">';
                html += '           <div class="key flex_half empty"><span></span></div>';
                html += '           <div class="key flex_full"><span><i>鐨�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>椴�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>鏂�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>鑻�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>娴�</i></span></div>';

                html += '           <div class="key flex_full"><span><i>璧�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>閯�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>妗�</i></span></div>';
                html += '           <div class="key flex_full m_r_none"><span><i>鐢�</i></span></div>';
                html += '           <div class="key flex_half empty"><span></span></div>';
                html += '       </div>';
                html += '       <div class="key_box flex_center">';
                html += '           <div class="key flex_full empty_2"><span><i></i></span></div>';
                html += '           <div class="key flex_full"><span><i>鏅�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>钂�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>闄�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>鍚�</i></span></div>';

                html += '           <div class="key flex_full"><span><i>闂�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>璐�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>娓�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>宸�</i></span></div>';
                html += '           <div class="key flex_full empty_2"><span><i></i></span></div>';
                html += '       </div>';
                html += '       <div class="key_box flex_center">';
                html += '           <div class="key flex_full empty_2"><span></span></div>';
                html += '           <div class="key flex_half_3 empty_2"><span><i></i></span></div>';
                html += '           <div class="key flex_full"><span><i>闈�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>钘�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>鐞�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>瀹�</i></span></div>';
                html += '           <div class="key flex_full"><span><i>浣�</i></span></div>';

                html += '           <div class="key flex_twice del"><span><i></i></span></div>';
                html += '           <div class="key flex_half_3 empty_2"><span><i></i></span></div>';
                html += '           <div class="key flex_full empty_2"><span></span></div>';
                html += '       </div>';
                html += '   </div>';
                html += '   <!--杞︾墝棣栨眽瀛楅敭鐩樼粨鏉�-->';
                html += '   <!--杞︾墝鍚庣紑閿洏寮€濮�-->';
                html += '   <div class="keyboard suffix" style="display: none">';
                html += '       <div class="click">';
                html += '           <div class="cover"></div>';
                html += '           <div class="float_num">8</div>';
                html += '           <img src="' + cpBase + 'resources/css/images/keyboard/hover.png"/>';
                html += '       </div>';
                html += '       <div class="key_box flex_center">';
                html += '           <div class="key flex_full n_key"><span><i>1</i></span></div>';
                html += '           <div class="key flex_full n_key"><span><i>2</i></span></div>';
                html += '           <div class="key flex_full n_key"><span><i>3</i></span></div>';
                html += '           <div class="key flex_full n_key"><span><i>4</i></span></div>';
                html += '           <div class="key flex_full n_key"><span><i>5</i></span></div>';

                html += '           <div class="key flex_full n_key"><span><i>6</i></span></div>';
                html += '           <div class="key flex_full n_key"><span><i>7</i></span></div>';
                html += '           <div class="key flex_full n_key"><span><i>8</i></span></div>';
                html += '           <div class="key flex_full n_key"><span><i>9</i></span></div>';
                html += '           <div class="key flex_full n_key"><span><i>0</i></span></div>';
                html += '       </div>';
                html += '       <div class="key_box flex_center">';
                html += '           <div class="key flex_full"><span><i>Q</i></span></div>';
                html += '           <div class="key flex_full"><span><i>W</i></span></div>';
                html += '           <div class="key flex_full"><span><i>E</i></span></div>';
                html += '           <div class="key flex_full"><span><i>R</i></span></div>';
                html += '           <div class="key flex_full"><span><i>T</i></span></div>';

                html += '           <div class="key flex_full"><span><i>Y</i></span></div>';
                html += '           <div class="key flex_full"><span><i>U</i></span></div>';
                html += '           <div class="key flex_full o_key disable"><span><i>O</i></span></div>';
                html += '           <div class="key flex_full"><span><i>P</i></span></div>';
                html += '           <div class="key flex_full"><span><i>A</i></span></div>';
                html += '       </div>';
                html += '       <div class="key_box flex_center">';
                html += '           <div class="key flex_full"><span><i>S</i></span></div>';
                html += '           <div class="key flex_full"><span><i>D</i></span></div>';
                html += '           <div class="key flex_full"><span><i>F</i></span></div>';
                html += '           <div class="key flex_full"><span><i>G</i></span></div>';
                html += '           <div class="key flex_full"><span><i>H</i></span></div>';

                html += '           <div class="key flex_full"><span><i>J</i></span></div>';
                html += '           <div class="key flex_full"><span><i>K</i></span></div>';
                html += '           <div class="key flex_full"><span><i>L</i></span></div>';
                html += '           <div class="key flex_full"><span><i>X</i></span></div>';
                html += '           <div class="key flex_full"><span><i>Z</i></span></div>';
                html += '       </div>';
                html += '       <div class="key_box flex_center">';
                html += '           <div class="key flex_half_2 empty"><span></span></div>';
                html += '           <div class="key flex_full"><span><i>C</i></span></div>';
                html += '           <div class="key flex_full"><span><i>V</i></span></div>';
                html += '           <div class="key flex_full"><span><i>B</i></span></div>';
                html += '           <div class="key flex_full"><span><i>N</i></span></div>';
                html += '           <div class="key flex_full"><span><i>M</i></span></div>';

                html += '           <div class="key flex_full last disable"><span><i>娓�</i></span></div>';
                html += '           <div class="key flex_full last disable"><span><i>婢�</i></span></div>';
                html += '           <div class="key flex_full last disable"><span><i>瀛�</i></span></div>';
                html += '           <div class="key flex_twice del m_r_none"><span><i></i></span></div>';
                html += '           <div class="key flex_half_2 empty"><span></span></div>';
                html += '       </div>';
                html += '   </div>';
                html += '   <!--杞︾墝鍚庣紑閿洏缁撴潫-->';
                html += '</div>';
                html += '<!--閿洏缁撴潫-->';

                if ($(".keyboard_box").length == 0) {
                    $(selector).append(html);
                } else {
                    console.log("閿洏宸插瓨鍦�");
                }

                //寮€濮嬫坊鍔犻敭鐩樹簨浠�

                //鍙嶆倲鏍囪锛屽綋鎵嬫寚绉诲埌鍒鏃跺彲浠ュ彇娑堝綋鍓嶆寜閿緭鍏�
                var regret = false;

                //鎸夐敭鐐瑰嚮寮€濮�
                $(".keyboard .key").on("touchstart", function () {
                    event.stopPropagation();
                    regret = false;
                    var me = $(this);
                    if (stopKeyEvent(me, "touchstart")) {
                        return false;
                    }
                    var span = me.find("span");
                    var width = span.width();
                    var height = span.height();
                    var x = span.attr("offsetLeft");
                    var y = span.attr("offsetTop");
                    var num = span.text();
                    // console.log(x + "," + y + "," + num);
                    // console.log(width + "," + height);
                    var hoverImgWidth = width * (110 / 64.0);
                    var clickImgObj = me.parent().parent().find(".click");
                    clickImgObj.width(hoverImgWidth);
                    var hoverImgHeight = clickImgObj.height();
                    var leftSpace = (hoverImgWidth - width) / 2.0;
                    var topSpace = hoverImgHeight - height;
                    var floatNum = clickImgObj.find(".float_num");
                    floatNum.height(topSpace);
                    floatNum.css("lineHeight", topSpace + "px");
                    floatNum.html(num);
                    // console.log(hoverImgWidth + "," + x);
                    clickImgObj.css({
                        "left": (x - leftSpace) + "px",
                        "top": (y - topSpace) + "px",
                        "zIndex": "200",
                        "visibility": "visible"
                    });
                    return false;
                });

                //鎸変綇鎸夐敭骞舵嫋鍔紝璇嗗埆涓虹敤鎴锋搷浣滃弽鎮�
                $(".keyboard .key").on("touchmove", function () {
                    event.stopPropagation();
                    regret = true;
                });

                //鎸夐敭鐐瑰嚮缁撴潫
                $(".keyboard .key").on("touchend", function () {
                    event.stopPropagation();
                    var me = $(this);
                    if (stopKeyEvent(me, "touchend")) {
                        return false;
                    }
                    var span = me.find("span");
                    var num = span.text();
                    var carPlateNum = $('#carplatnum').text();
                    if (carPlateNum.length < 8 && carPlateNum.indexOf("娓�") < 0 && carPlateNum.indexOf("婢�") < 0 && carPlateNum.indexOf("瀛�") < 0) {
                        $('#carplatnum').text(carPlateNum + num);
                    }
                    span.find("i").show();
                    toggleEnergyIcon();
                    toggleDisplayKey();
                    showKeyBoard();
                    hideClickImgObj();
                    return false;
                });

                /*PC绔敭鐩樹簨浠� 榧犳爣鐐瑰嚮*/
                $(".keyboard .key").mousedown(function () {
                    event.stopPropagation();
                    regret = false;
                    var me = $(this);
                    if (stopKeyEvent(me, "touchstart")) {
                        return false;
                    }
                    var span = me.find("span");
                    var width = span.width();
                    var height = span.height();
                    var x = span.attr("offsetLeft");
                    var y = span.attr("offsetTop");
                    var num = span.text();
                    // console.log(x + "," + y + "," + num);
                    // console.log(width + "," + height);
                    var hoverImgWidth = width * (110 / 64.0);
                    var clickImgObj = me.parent().parent().find(".click");
                    clickImgObj.width(hoverImgWidth);
                    var hoverImgHeight = clickImgObj.height();
                    var leftSpace = (hoverImgWidth - width) / 2.0;
                    var topSpace = hoverImgHeight - height;
                    var floatNum = clickImgObj.find(".float_num");
                    floatNum.height(topSpace);
                    floatNum.css("lineHeight", topSpace + "px");
                    floatNum.html(num);
                    // console.log(hoverImgWidth + "," + x);
                    span.css("zIndex","200");
                    span.find("i").hide();
                    clickImgObj.css({
                        "left": (x - leftSpace) + "px",
                        "top": (y - topSpace) + "px",
                        "zIndex": "200",
                        "visibility": "visible"
                    });
                    return false;
                });

                /*PC绔敭鐩樹簨浠� 閲婃斁榧犳爣*/
                $(".keyboard .key").mouseup(function () {
                    event.stopPropagation();
                    var me = $(this);
                    if (stopKeyEvent(me, "touchend")) {
                        return false;
                    }
                    var span = me.find("span");
                    var num = span.text();
                    var carPlateNum = $('#carplatnum').text();
                    if (carPlateNum.length < 8 && carPlateNum.indexOf("娓�") < 0 && carPlateNum.indexOf("婢�") < 0 && carPlateNum.indexOf("瀛�") < 0) {
                        $('#carplatnum').text(carPlateNum + num);
                    }
                    span.css("zIndex","0");
                    span.find("i").show();
                    toggleEnergyIcon();
                    toggleDisplayKey();
                    showKeyBoard();
                    hideClickImgObj();
                    return false;
                });

                //閿洏浜嬩欢锛岄槻姝㈠啋娉�
                $(".keyboard_box").click(function () {
                    event.stopPropagation();
                });

                //鍏抽棴閿洏
                $(".keyboard_box .k_close").on("click", function () {
                    closeKeyBoard();
                });
            }
        };
    };
})(Zepto);